import { Col, Row,Select ,Button} from "antd";
import zjyLogo from "../image/test-zjylogo.png"
import excellent from "../image/test-优师优课img.png"
import button from "../image/test-button.png"
import load from "../image/test-进度条.png"
import btnimg from"../image/按钮云.png"
import goback from "../image/test-返回.png"
import shareimg from "../image/分享.png"
import person from "../image/person.png"
import cloud from "../image/云朵.png"
import book from "../image/book.png"
import eye from "../image/eye.png"
import loadClude from "../image/弹出云朵效果.png"
import React ,{useState}from "react";
import "./index.less"
function Test() {
  const course = ["课程前","课程中","课程后"];
  const [state, setState] = useState("none");
  const anim=()=>{
    
     if(state==="none"){
        setState("block")

     }

    }  
    const animClose=()=>{
      if(state==="block"){
        setState("none")

     }
   
    }
  
  return (
    <div className="test" onClick={()=>animClose()} >
      <div className="test-center" >
      <img src={loadClude} alt="动态图"  className="anim_fade_image" style={{display:`${state}`}} />
        <div className="test-head">
          <div className="test-head-top">
            <div>
              <img src={zjyLogo} alt="zjyLogo" />
            </div>
            <div>
              <img src={excellent} alt="zjyLogo" />
            </div>
            <div>
              <a href="#">活动简介</a> &nbsp;
              <Select
                placeholder={"活动期数"}
                dropdownClassName={"order-dropdown"}
                style={{ width: 100 }}
              ></Select>
            </div>
          </div>
  
          <div className="test-head-main">
            <img src={button} alt="button" />
            <span>我要参与</span>
          </div>
          <div className="test-head-bottom">
            <img src={load} alt="load" />
          </div>
        </div>
        <div className="test-main">
          <img src={goback} alt="back" className="img-1" />
          <div className="test-main-top">
            <div className="test-main-top-img-2">
              <img src={person} alt="person" />
            </div>
            <div>
              <p>
                <Button type="primary">初中数学</Button>
                <span className="title">
                  课例名称：《两位数减一位数（退位减法）》
                </span>
              </p>
              <p className="p">章节目录：100以内的加法和减法（二）</p>
              <p className="p">
                教材：义务教育教科书.数学一年级 下册 （西南师大版）
              </p>
            </div>
            <div>
              <img src={cloud} alt="cloud" />
              <p className="num">2988</p>
              <div className="address">
                <span>中教云学校：张三</span>
              </div>
            </div>
          </div>
          <div className="test-main-middle">
            <div className="test-main-middle-right">
              <div className="item">
                <div className="item-logo"></div>
                <span>课程资源</span>
              </div>
            {
              course.map((item,index)=><div className="test-main-middle-right-content" key={index}>
              <p>{item}</p>
             
              <div>
                <span>
                 
                  <img src={book} alt="bookLogo" />
                </span>
                <span>春夏秋冬课前练习</span>
                <span>
                 
                  <img src={eye} alt="eyeLogo" onClick={()=>console.log(111)}/>
                </span>
              </div>
             
            </div>)
            }
              
             
             
            </div>
            <div className="test-main-middle-left">
              <div className="item">
                <div className="item-logo"></div>
                <span>教案</span>
                <div  className="teaching" >
                    <p>查看教案</p>
               </div>
              </div>
              <div className="item">
                <div className="item-logo"></div>
                <span>参选视频</span>
                <div  className="teaching" >
                    <p>查看教案</p>
               </div>
              </div>
            </div>
          </div>
          <div className="test-main-bottom">
            <div className="test-main-bottom-hh1"></div>
            <span className="test-main-bottom-publicity">宣传文字</span>
            <div className="test-main-bottom-div">
            <span className="test-main-bottom-div-span">今日,能够站在那里发言,我既感到幸运,同时又感到很有压力。感到幸运,是基于我进公司的时间不长,工作表现也不算异常出色,但我的工作仍然得到了大家的认同和支持,所以,我想,我是幸运的;而感到压力,是因为今日的成绩将是我明天的起点,我要努力做的更好,才能实现不断提升。</span>
            </div>
          </div>
          <div className="test-main-button">
            <Button className="test-main-button-btn" onClick={()=>anim()}> <img className="test-main-button-btnimg" src={btnimg}></img>给TA云朵</Button>
            <img className="test-main-button-shareimg" src={shareimg}></img>
            <a className="test-main-button-share">分享</a>
            <div>
              
            </div>
           
          </div>
        </div>
      </div>
    </div>
  );
}
export default Test;
